// https://juejin.cn/book/6844733759326158861/section/6844733759388909576
import * as THREE from "three";

createWorld();
//模拟现实场景
function createWorld() {
  initRender(); //创建渲染器
  initCamera(); //创建相机
  initLight(); //创建光源
  initObject(); //创建物体
  initScene(); //创建场景
  render(); //渲染
}

var renderer; // 渲染器
var width;
var height;
function initRender() {
  console.log("initRender----");
  width = window.innerWidth;
  height = window.innerHeight;
  renderer = new THREE.WebGLRenderer({
    antialias: true, // 抗锯齿开启
  });
  renderer.setSize(width, height); // 设置渲染器的宽度和高度
  renderer.setClearColor("#000000", 1.0); // 设置背景色
  renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比

  document.getElementById("retina").appendChild(renderer.domElement); //把渲染器放置到页面中
}

var camera;
var origPoint = new THREE.Vector3(0, 0, 0); // 原点
// 创建相机
function initCamera() {
  console.log("initCamera-------");
  camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
  camera.position.set(200, 400, 600); //设置相机位置
  camera.up.set(0, 1, 0); //设置相机正方向
  // camera.lookAt(origPoint); //设置相机视点
  camera.lookAt(0, 0, 0); //设置相机视点
}

var pointLight;
var ambientLight;
//创建光源
function initLight() {
  console.log("initLight---------");
  // 点光源
  pointLight = new THREE.PointLight(0xffffff, 1, 2000);
  pointLight.position.set(70, 112, 98);
  // 环境光
  ambientLight = new THREE.AmbientLight(0x333333);
}

var cube;
var axis; // 辅助线物体
//创建物体
function initObject() {
  console.log("initObject---------");
  var geometry = new THREE.BoxGeometry(100, 100, 100); // 立方体轮廓
  // var materail = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // 非光滑表面材质没有高亮的镜面反射
  var materail = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 立方体的表面颜色为红色的材质
  cube = new THREE.Mesh(geometry, materail);
  cube.position.set(0, 0, 0);
  // 创建辅助线物体
  axis = new THREE.AxesHelper(5);
}

var scene;
//创建场景
function initScene() {
  console.log("initScene---------");
  scene = new THREE.Scene();
  scene.add(pointLight);
  scene.add(ambientLight);
  scene.add(cube);
  scene.add(axis);
}

//渲染
function render() {
  renderer.clear();
  renderer.render(scene, camera);
  cube.rotation.x += 0.005;
  cube.rotation.y += 0.005;
  requestAnimationFrame(render);
}
